<template>
	<el-breadcrumb
		v-if="data && data.length"
		class="my-breadcrumb"
		:class="{
			[`is-${props.theme}`]: !!props.theme
		}"
		:separator="!!props.theme ? '' : separator"
		:separator-class="separatorClass"
	>
		<el-breadcrumb-item
			v-for="(item, index) in data"
			:key="item.path + index"
			:class="{
				'is-active': active === index,
				'is-only-one': data.length === 1
			}"
			@click="handleClick(item, index)"
			:to="item.path"
		>
			<slot>
				<my-icon v-if="item.icon" :icon="item.icon"></my-icon>
				{{ item.title }}
			</slot>
		</el-breadcrumb-item>
	</el-breadcrumb>
</template>

<script setup name="MyBreadcrumb">
/**
 * 面包屑导航
 * @module $ui/components/my-breadcrumb
 */

/**
 * 属性参数
 * @member props
 * @property {Array} [data] 菜单项数据 [{label,icon,to}]
 * @property {string} [data.label] 菜单项名称
 * @property {string|object} [data.icon] 菜单项图标，支持svg类型
 * @property {string} [data.to] 菜单链接路由
 * @property {string} [separator] 分隔符
 * @property {string} [theme] 风格，可选值：'flat', 'arrow'
 * @property {number} [active] 当前激活的菜单索引，支持sync修饰符
 */
const props = defineProps({
	data: {
		type: Array
	},
	separator: String,
	separatorClass: String,
	theme: {
		type: String,
		validator(val) {
			return ['', 'flat', 'arrow'].includes(val);
		}
	},
	active: {
		type: Number
	}
});

/**
 * 点击菜单时触发
 * @event click
 * @param {object} item 菜单项
 * @param {number} index 菜单项索引
 */
const emit = defineEmits(['click', 'update:active']);
function handleClick(item, index) {
	emit('click', item, index);
	emit('update:active', index);
}
</script>

<style lang="scss" scoped>
$breadcrumb-blue: var(--el-color-primary);
$breadcrumb-blue-darken: var(--el-color-primary);
$breadcrumb-green: var(--el-color-white);
$breadcrumb-green-darken: var(--el-color-white);

@mixin lighter($value) {
	color: var(--el-color-white);
	background-color: rgba(24, 144, 255, $value) !important;

	&::before {
		border-color: rgba(24, 144, 255, $value) !important;
		border-left-color: transparent !important;
	}

	&::after {
		border-left-color: rgba(24, 144, 255, $value) !important;
	}

	&:hover,
	&.is-active {
		color: var(--el-color-primary);
		background-color: $breadcrumb-green !important;

		&::before {
			border-color: $breadcrumb-green !important;
			border-left-color: transparent !important;
		}

		&::after {
			border-left-color: $breadcrumb-green !important;
		}
	}
}
$height: 30px;

@include b(breadcrumb) {
	height: $height;
	line-height: $height;

	:deep() {
		.el-breadcrumb__inner {
			color: inherit !important;
			opacity: 0.7;
			transition: none !important;

			a {
				transition: none !important;
			}
		}

		.el-breadcrumb__separator {
			color: inherit !important;
			opacity: 0.3;
		}
	}

	@include when(flat) {
		:deep() {
			.el-breadcrumb__separator {
				display: none;
			}

			.el-breadcrumb__inner {
				display: block;
				height: $height;
				padding: 0 10px 0 0;
				font-weight: normal !important;
				line-height: $height;
				color: var(--el-color-white) !important;
				text-align: center;
				text-decoration: none;
				opacity: 1;
			}

			.el-breadcrumb__item {
				position: relative;
				display: block;
				margin-right: 23px;
				background: $breadcrumb-blue;

				&::before,
				&::after {
					position: absolute;
					top: 0;
					width: 0;
					height: 0;
					content: '';
					border: 0 solid $breadcrumb-blue;
					border-width: calc($height / 2) 10px;
				}

				&::before {
					left: -20px;
					border-left-color: transparent;
				}

				&::after {
					left: 100%;
					border-color: transparent;
					border-left-color: $breadcrumb-blue;
				}

				&:hover,
				&.is-active {
					color: var(--el-color-primary) !important;
					background-color: $breadcrumb-green !important;

					&::before {
						border-color: $breadcrumb-green !important;
						border-left-color: transparent !important;
					}

					&::after {
						border-left-color: $breadcrumb-green !important;
					}

					.el-breadcrumb__inner {
						color: var(--el-color-primary) !important;
					}
				}

				&:nth-child(even) {
					background-color: $breadcrumb-blue-darken;

					&::before {
						border-color: $breadcrumb-blue-darken;
						border-left-color: transparent;
					}

					&::after {
						border-left-color: $breadcrumb-blue-darken;
					}
				}

				&:first-child {
					padding-left: 10px;
					border-radius: 4px 0 0 4px;

					&::before {
						border: none;
					}
				}

				&:last-child {
					margin-right: 0;
					border-radius: (0 4px 4px 0);

					&::after {
						border: none;
					}
				}

				&.is-only-one {
					border-radius: (4px 4px 4px 4px);
				}
			}
		}
	}

	@include when(arrow) {
		overflow: hidden;

		:deep() {
			.el-breadcrumb__separator {
				display: none;
			}

			.el-breadcrumb__inner {
				display: block;
				height: $height;
				padding: 0 10px 0 0;
				font-weight: normal !important;
				line-height: $height;
				color: var(--el-color-white);
				text-align: center;
				text-decoration: none;
				opacity: 1;
			}

			.el-breadcrumb__item {
				position: relative;
				display: block;
				margin-right: 23px;
				background: $breadcrumb-blue;

				&::before,
				&::after {
					position: absolute;
					top: 0;
					width: 0;
					height: 0;
					content: '';
					border: 0 solid $breadcrumb-blue;
					border-width: calc($height / 2) 10px;
				}

				&::before {
					left: -20px;
					border-left-color: transparent;
				}

				&::after {
					left: 100%;
					border-color: transparent;
					border-left-color: $breadcrumb-blue;
				}

				&:hover,
				&.is-active {
					color: var(--el-color-primary-light-1);
					background-color: $breadcrumb-green !important;

					&::before {
						border-color: $breadcrumb-green !important;
						border-left-color: transparent !important;
					}

					&::after {
						border-left-color: $breadcrumb-green !important;
					}
				}

				&:first-child {
					padding-left: 15px;
					border-radius: 4px 0 0 4px;

					&::before {
						border: none;
					}
				}

				&:nth-last-child(1) {
					@include lighter(0.2);
				}

				&:nth-last-child(2) {
					@include lighter(0.4);
				}

				&:nth-last-child(3) {
					@include lighter(0.6);
				}

				&:nth-last-child(4) {
					@include lighter(0.8);
				}
			}
		}
	}
}
</style>
